<script setup>
    import adminApi from "@/api/admin/admin.js";
    import {Plus} from "@element-plus/icons-vue";

    import {ElMessage} from 'element-plus'
    import {useRouter} from 'vue-router'
    const router = useRouter();

    import {useTokenStore} from "@/store/token.js";
    const tokenStore = useTokenStore();
    import {useAdminInfoStore} from "@/store/adminInfo.js";
    import {ref} from "vue";

    const adminInfoStore = useAdminInfoStore();

    const titleName = "修改基本资料"

    const getAdminInfo = () => {
        adminApi.adminInfo().then(result => {
            if (result.code === 0) {
                adminInfoStore.setAdminInfo(result.data)
            }
        })
    }
    getAdminInfo()

    //修改个人信息
    const admin = ref({})
    Object.assign(admin.value, adminInfoStore.admin)
    const headers = ref({
        //添加token
        Authorization: tokenStore.token
    })

    const handleAvatarSuccess = (result) => {
        admin.value.image = result.data
    }

    const updateAdminInfo = () => {
        adminApi.update(admin.value).then(result => {
            if (result.code === 0) {
                ElMessage({message: result.msg, type: 'success',})
                //重新加载最新数据
                getUserInfo()
                //跳转到主界面
                router.push('/')
            } else {
                ElMessage.error(result.msg)
            }
        })
    }
</script>

<template>
    <el-card class="">
        <template #header>
            <div class="header">
                <strong>{{titleName}}</strong>
            </div>
        </template>

        <el-form :model="admin">
            <el-form-item label="姓名" :label-width="60">
                <el-input v-model="admin.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="昵称" :label-width="60">
                <el-input v-model="admin.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="60">
                <el-input v-model="admin.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="admin.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="头像" :label-width="60">
                <el-upload
                    class="avatar-uploader"
                    action="/api/admin/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :headers="headers"
                >
                    <img v-if="admin.image" :src="admin.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="updateAdminInfo">
                    确认
                </el-button>
            </div>
        </template>
    </el-card>
</template>

<style scoped>
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>